<template>
	<div id="richTextEditor" :style="{ height: height + 'px' }"></div>
</template>

<script lang="ts">
import { defineComponent, onMounted } from 'vue'
import Quill from 'quill'
import 'quill/dist/quill.snow.css'
export default defineComponent({
	name: 'RichTextEditor',
	props: {
		height: {
			type: [Number, String],
			default: 'auto'
		}
	},
	setup() {
		let quill: Quill | null = null
		const init = () => {
			const options = {
				modules: {
					toolbar: [
						['bold', 'italic', 'underline', 'strike'], // 切换按钮
						['blockquote', 'code-block'],

						[{ list: 'ordered' }, { list: 'bullet' }],
						[{ script: 'sub' }, { script: 'super' }], // 上标/下标
						[{ indent: '-1' }, { indent: '+1' }], // 减少缩进/缩进
						[{ direction: 'rtl' }], // 文本下划线

						[{ size: ['small', false, 'large', 'huge'] }], // 用户自定义下拉
						[{ header: [1, 2, 3, 4, 5, 6, false] }],

						[{ color: [] }, { background: [] }], // 主题默认下拉，使用主题提供的值
						[{ align: [] }],

						['link', 'image'],

						['clean'] // 清除格式
					]
				},
				placeholder: '请输入文章内容…',
				theme: 'snow'
			}
			quill = new Quill(document.getElementById('richTextEditor') as Element, options)
		}
		onMounted(init)
		const getHtmlContent = () => {
			return (document.getElementById('richTextEditor')?.firstChild as any).innerHTML
		}
		const getJsonContent = () => {
			return JSON.stringify(quill?.getContents())
		}
		return {
			getHtmlContent,
			getJsonContent
		}
	}
})
</script>
